<!DOCTYPE html>
<script src="../../resources/js-test.js"></script>
<style>
@font-face {
    font-family: Test;
    font-weight: 400;
    src: local(Times);
}
</style>
<span id="text" style="font-family: Test; font-weight: 700;">Test Text</span>
<script>
description('Tests that adding a FontFace to existing family triggers font update.');

window.jsTestIsAsync = true;

var widthBeforeLoad, widthAfterLoad;

document.fonts.ready.then(function() {
    widthBeforeLoad = document.getElementById('text').offsetWidth;
    var face = new FontFace('Test', 'url(../../resources/Ahem.ttf)', { weight: 700 });
    document.fonts.add(face);
    return face.loaded;
}).then(function() {
    widthAfterLoad = document.getElementById('text').offsetWidth;
    shouldBeTrue('widthBeforeLoad != widthAfterLoad');
    finishJSTest();
});
</script>
